<html>
	<head>
		<title>Thrissa's Signature Generator Customiser Builder Creator</title>
		<script type="text/javascript">
		<!--
			var server = "Blackrock";
			var player = "";
			var selectedtab = "";
			
			function Loaded() {
				document.getElementById('tabpvp').onclick = tabClicked;
				document.getElementById('tabpve').onclick = tabClicked;
				document.getElementById('tabreport').onclick = tabClicked;
				document.getElementById('sigMain').style.display = 'none';
				document.getElementById('step1').onsubmit = step1Submit;
				// preload tabs
				var tab = new Image();
				tab.src = 'assets/tab.gif';
				var tabon = new Image();
				tabon.src = 'assets/tabon.gif';
			}
			function step1Submit() {
				document.getElementById('sigMain').style.display = 'block';
				// grab all the data from the form
				player = document.getElementById('fcharacter').value;
				server = document.getElementById('fserver').value;
				selectTab('pve');
				// create the image links
				updateSigs();
				
				return false; // stop form submission
			}
			
			/* updates the div with all the different sig styles and links */
			function updateSigs() {
				var sigs = document.getElementById('sigDisplay');
				sigs.innerHTML = "";
				if (selectedtab == 'report') {
					// ajax get the contents
					sigs.innerHTML = "Hello report!";
					// ajax send the comment report and return a message
				} else {
					for(i = 1; i < 5; i++) {
						sigs.innerHTML += "<h3>Style "+i+"</h3><img src=\"http://jebus.geek.nz/WoW/armory/"+selectedtab+"/"+server+"/"+player+"/sig"+i+".jpg\" /><br /><br />";
						sigs.innerHTML += "<div class=\"clabel\">BBcode Sig:</div><input type=\"text\" size=\"100\" value=\"[img]http://jebus.geek.nz/WoW/armory/"+selectedtab+"/"+server+"/"+player+"/sig"+i+".jpg[/img]\" /><br />";
						sigs.innerHTML += "<div class=\"clabel\">HTML Image:</div><input type=\"text\" size=\"100\" value=\"&lt;img src=&quot;http://jebus.geek.nz/WoW/armory/"+selectedtab+"/"+server+"/"+player+"/sig"+i+".jpg&quot; /&gt;\" /><br />";
						sigs.innerHTML += "<div class=\"clabel\">Image Link:</div><input type=\"text\" size=\"100\" value=\"http://jebus.geek.nz/WoW/armory/"+selectedtab+"/"+server+"/"+player+"/sig"+i+".jpg\" /><hr />";
					}
				}
			}
			/* tab clicked, update sigs list */
			function tabClicked() {
				switch (this.id) {
					case 'tabpvp':
						selectTab('pvp');
						break;
					case 'tabreport':
						selectTab('report');
						break;
					case 'tabpve':
					default:
						selectTab('pve');
						break;
				}
				updateSigs();
			}
			/* select the tab, change styles and update the display  */
			function selectTab(tabname) {
				selectedtab = tabname;
				document.getElementById('tabpve').style.background = "url('assets/tab.gif')";
				document.getElementById('tabpvp').style.background = "url('assets/tab.gif')";
				document.getElementById('tabreport').style.background = "url('assets/tab.gif')";
				document.getElementById('tab'+tabname).style.background = "url('assets/tabon.gif')";
			}
		//-->
		</script>
		<style type="text/css">
			#sigMain {
				display: none;
				width: 800px;
			}
			.tab {
				background-image: url('assets/tab.gif');
				float: left;
				height: 20px;
				width: 100px;
				margin-right: 2px;
				color: white;
				text-align: center;
				cursor: pointer;
			}
			#tabreport {
				float: right;
			}
			#sigDisplay {
				clear: both;
				background-color: pink;
				padding: 10px;
				border: 2px solid #676767;
				background-color: #cccccc;
			}
			#sigDisplay input {
				border: 1px solid black;
				background-color: #999999;
				padding: 2px;
				margin-bottom: 3px;
			}
			#serverchar {
				background-color: #3399ff;
				padding-left: 1em;
				padding-right: 1em;
				padding-bottom: 10px;
				padding-top: 0;
				width: 500px;
				border: 2px solid black;
				margin-bottom: 10px;
			}
			h1 {
				text-decoration: underline;
			}
			h3 {
				margin: 0;
				padding: 0;
			}
			.slabel {
				width: 5em;
				float: left;
			}
			.clabel {
				width: 6em;
				float: left;
			}
			.sinput {
				margin: 3px;
			}
		</style>
	</head>
	<body onload="Loaded()">
		<h1>Thrissa's Signature Generator Customiser Builder Creator</h1>
		<p>Version 0.2 (5th March): Added support for realms with spaces and quotes. Also added Comments/Bugs tab, please let me know if there are any changes you'd like to see.<br />
			Version 0.1 (4th March): Currently for US realms only, untested for realms with spaces and quotes. Also does not support names outside normal [A-Za-z]+ ranges.</p>
		<div id="serverchar"><h2>Server and Character name</h2>
			<form id="step1" name="step1">
			<div class="slabel">Server:</div><div class="sinput"><input type="text" id='fserver' name="server" value="Blackrock" /></div>
			<div class="slabel" style="clear: both">Character:</div><div class="sinput"><input type="text" id='fcharacter' name="character" value="" /></div>
			<div class="slabel">&nbsp;</div><input type="submit" value="Sig Me" />
			</form>
		</div>
		<div id="sigMain">
			<div id="tabs">
				<div id="tabpve" class="tab">PvE Sigs</div><div id="tabpvp" class="tab">PvP Sigs</div><div id="tabreport" class="tab">Comment/Bugs</div>
			</div>
			<div id="sigDisplay">
			</div>
		</div>
	</body>
</html>
